<template>
	<view class="bjx-inputs" :style="getStyle">
		<view class="bjx-background" @tap="isShow = false" v-show="isShow"></view>
		<view class="bjx-con">
			<slot name="left"></slot>
			<input
				:disabled="theDisabled"
				:placeholder="placeholder"
				v-model="theValue"
				@input="theInput"
				@tap="isShow = data.length"
				@focus="theFocus"
				@blur="theBlur"
				autocomplete="off"
			/>
			<slot name="right"></slot>
		</view>
		<view class="bjx-select" v-show="show">
			<view class="data">
				<view class="select-item" :class="'item-' + overflow" v-for="(item, index) in data" :key="index" @tap="selectItem(item, index)">
					<view class="item-text" :class="{ active: getItem(item) == theValue }">{{ getItem(item) }}</view>
				</view>
			</view>
			<view class="item-close" @tap="isShow = false">收起</view>
		</view>
	</view>
</template>

<script>
let fontUnit = 'upx';
// #ifdef MP-WEIXIN
fontUnit = 'rpx';
// #endif
export default {
	name: 'BjxInputs',
	props: {
		placeholder: {
			type: String,
			default: ''
		},
		value: {
			type: String,
			default: ''
		},
		itemKey: {
			type: String,
			default: ''
		},
		width: {
			type: String,
			default: '600'
		},
		disabled: {
			type: Boolean,
			default: false
		},
		timeDelay: {
			type: Number,
			default: 60
		},
		theStyle: {
			type: String,
			default: ''
		},
		overflow: {
			type: String,
			default: 'auto'
		}
	},
	data() {
		return {
			timer: null,
			data: [],
			isShow: false,
			theValue: this.value,
			theDisabled: this.disabled
		};
	},
	watch: {
		value(val) {
			this.theValue = val;
		}
	},
	computed: {
		show() {
			return this.isShow && this.data.length;
		},
		getStyle() {
			let style = this.theStyle.replace(/upx/g, fontUnit);
			let width = 'width:' + (!isNaN(Number(this.width)) ? this.width + fontUnit : this.width) + ';';
			return style + width;
		}
	},
	methods: {
		showItem() {
			this.isShow = this.data.length > 0;
		},
		theFocus(e) {
			this.$emit('focus', e);
		},
		theBlur(e) {
			this.$emit('blur', e);
		},
		theInput(e) {
			clearTimeout(this.timer);
			this.timer = setTimeout(() => {
				this.$emit('list', { value: e.detail.value, callback: this.setData });
			}, this.timeDelay);
		},
		getItem(item) {
			return this.itemKey && typeof item == 'object' ? item[this.itemKey] : item;
		},
		selectItem(item) {
			this.isShow = false;
			this.theValue = this.itemKey ? item[this.itemKey] : item;
			this.$emit('select', item);
		},
		setData(data) {
			if (data) {
				this.isShow = true;
				this.data = data;
			}
		},
		setValue(value) {
			this.theValue = value;
		},
		setDisabled(value) {
			this.theDisabled = value;
		}
	}
};
</script>

<style lang="scss" scoped>
.bjx-inputs {
	max-width: 100%;
	position: relative;
	.bjx-background {
		position: fixed;
		top: 0;
		left: 0;
		width: 750upx;
		height: 100%;
	}
	.bjx-con {
		display: flex;
		align-items: center;
		justify-content: center;
		input {
			flex: 1;
			margin: 0 6upx;
			padding: 10upx 0;
		}
	}
	.bjx-select {
		border: 1px solid #eee;
		position: absolute;
		border-radius: 20upx;
		z-index: 999;
		background: #f8f8f8;
		width: 80%;
		.data {
			max-height: 660upx;
			padding: 15upx;
			overflow: auto;
			.select-item {
				width: 100%;
				.item-text {
					padding: 10upx 0;
				}
				.active {
					font-weight: bold;
				}
				border-bottom: 1upx solid #eee;
			}
			.item-auto {
				overflow: auto;
				.item-text {
					width: max-content;
				}
			}
			.item-hide .item-text {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.item-close {
			padding: 20upx;
			text-align: center;
			font-size: 32upx;
			border-top: 1px solid #eee;
			color: #8f8f94;
			color: #12ae85;
		}
	}
}
</style>
